<template>
  <div class="printable">
    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    <div class="select-view horizontal">
      <!-- 选择系统 -->
      <select id="deviceType" class="p-view" v-model="idol">
        <option value="1">高压水系统</option>
        <option value="2">低压水系统</option>
        <option value="3">液压系统</option>
        <option value="4">滑油系统</option>
        <option value="5">高压空气系统</option>
      </select>

      <!-- 多选设备展示（使用 checkbox） -->
      <label>选择显示设备：</label>
      <div 
        style="display: flex; flex-wrap: wrap; gap: 10px; max-width: 600px;"
      >
        <div 
          v-for="(device, index) in deviceOptions" 
          :key="index"
          style="display: flex; align-items: center;"
        >
          <label style="white-space: nowrap;">
            <input 
              type="checkbox" 
              :value="index" 
              v-model="selectedDevices"
            />
            {{ device }} 
          </label>
        </div>
      </div>
      <!-- 时间单位选择 -->
      <label>选择时间单位：</label>
      <select  class="p-view" v-model="selectedTimeUnit">
        <option value="second">秒</option>
        <option value="minute">分钟</option>
        <option value="hour">小时</option>
      </select>

      <!-- 时间间隔选择 -->
      <label>选择间隔值：</label>
      <select class="p-view" v-model="selectedTimeValue">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
      </select>

      <div class="custom-date-time-picker">
        <VueCtkDateTimePicker label="开始时间" no-header="false" v-model="startDate" format="YYYY-MM-DD HH:mm"  />
      </div>
      <div class="custom-date-time-picker">
        <VueCtkDateTimePicker label="结束时间" no-header="false" v-model="endDate" format="YYYY-MM-DD HH:mm" />
      </div>
      <div class="but-view" @click="requestExcelData">查询</div>
    </div>
    <div>
      <button class="btn_anniu" @click="change1" :class="{ newStyle: 0 === type }">曲线图表格</button>
      <button class="btn_anniu" @click="change2" :class="{ newStyle: 1 === type }">数据表格</button>
    </div>
    <!-- 曲线图表格 -->
    <div v-show="0 === type">
      <div class="chartView">
        <div>曲线图显示</div>
        <div class="deviceAlarm" id="chartRef1" style="width: 100%; height: 500px;"></div>
      </div>
    </div>
    <!-- 数据表格 -->
    <div v-show="1 === type">
      <div class="scroll-container">
      <table>
        <thead>
          <tr class="header-row text-color">
            <th v-for="item in selectedname" :key="item">{{ item }}</th>
          </tr>
        </thead>
        <tbody class="tbody_history">
          <tr v-for="(item, index) in getExcelData" :key="item.id" class="header-row text-color">
            <td class="line-spacing">{{ index + 1 }}</td> <!-- 从 1 开始的序号 -->
            <td class="line-spacing">{{ item.time }}</td>
            <td v-for="(value, subIndex) in item.context" :key="subIndex" class="line-spacing">{{ value }}</td>
          </tr>
           <!-- 插入分页符 -->
          <tr class="page-break">
            <td colspan="5"></td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
    <!-- 打印按钮 -->
    <button @click="printTable" style="margin-top: -100px;right: 500px;">打印表格</button>
    <!-- 导出为 Excel 按钮 -->
    <button @click="exportToExcel" style="margin-top: -100px;right: 500px;">导出为 Excel</button>
  </div>
  <!-- 测试人员区域 (表格上方) -->
  <div style="text-align: center; margin-bottom: 10px;">
  </div>
</template>
<script setup>
import { ref, onMounted,  computed,nextTick } from 'vue';
import * as XLSX from 'xlsx';
import request from '../../api/request';
import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
import * as echarts from 'echarts';

const idol = ref('1');  // 当前选中的系统
const selectedDevices = ref([]); // 选中的设备索引
const selectedname = ref([]);
const systemid = ref([]);
const exportData = ref([]); // 如果你希望是响应式的
// 各系统的 title
const aboutTitle = ref(['序号', '时间', '压力12.1', '压力12.2', '压力12.3', '压力12.4', '压力13.1', '压力13.2','压力13.3','压力13.4', '温度14.1', '温度14.2', '温度14.3', '温度14.4', '温度14.5', '流量15.1', '流量15.2','液位21']);
const fluidTitle = ref(['序号', '时间', '压力28.1', '压力28.2','压力28.3', '压力21.1', '压力21.2','压力21.3','压力62','温度6', '温度27.1', '温度27.2','温度27.3','温度27.4','温度35.1','温度35.2','流量36','流量51','液位5' ]);
const waterTitle = ref(['序号', '时间', '流量12', '流量13', '流量14', '流量15', '液位24', '温度23','温度36', '温度37', '温度38', '温度39', 
'压力28', '压力29', '压力30', '压力31', '压力32', '压力33','压力34', '压力35']);
const fuelTitle = ref(['序号', '时间', '流量39','流量40', '流量41', '温度26', '温度27','压力22','压力25', '液位18','液位21', '温度54', '温度56','温度58', '压力51', '压力52','压力53','压力55','压力57','压力59']);
const airTitle = ref(['序号', '时间', '管路流量','压力', '温度', '露点', '空气流量','大气压力','大气温度', '大气湿度']);
// 计算属性：根据系统选项动态生成设备选项（不含“序号”和“时间”）
const deviceOptions = computed(() => {
  let titleList = [];
  switch (idol.value) {
    case '4':
      titleList = aboutTitle.value;
      break;
    case '2':
      titleList = waterTitle.value;
      break;
    case '3':
      titleList = fluidTitle.value;
      break;
    case '1':
      titleList = fuelTitle.value;
      break;
    case '5':
      titleList = airTitle.value;
      break;  
    default:
      titleList = [];
  }
  return titleList.slice(2); // 去掉前两个
});

// 不同系统下的名称-ID映射表
const deviceIdMap = {
  '4': { // aboutTitle
    '压力12.1': 83,
    '压力12.2': 84,
    '压力12.3': 85,
    '压力12.4': 86,
    '压力13.1': 87,
    '压力13.2': 88,
    '压力13.3': 89,
    '压力13.4': 90,
    '温度14.1': 91,
    '温度14.2': 92,
    '温度14.3': 93,
    '温度14.4': 94,
    '温度14.5': 95,
    '流量15.1': 96,
    '流量15.2': 97,
    '液位21': 100
  },
  '2': { // waterTitle
    '流量12': 65,
    '流量13': 66,
    '流量14': 67,
    '流量15': 68,
    '液位24': 69,
    '温度23': 70,
    '温度36': 71,
    '温度37': 72,
    '温度38': 73,
    '温度39': 74,
    '压力28': 75,
    '压力29': 76,
    '压力30': 77,
    '压力31': 78,
    '压力32': 79,
    '压力33': 80,
    '压力34': 81,
    '压力35': 82
  },
  '3': { // fluidTitle
    '压力28.1': 81,
    '压力28.2': 82,
    '压力28.3': 83,
    '压力21.1': 84,
    '压力21.2': 85,
    '压力21.3': 86,
    '压力62': 87,
    '温度6': 88,
    '温度27.1': 89,
    '温度27.2': 90,
    '温度27.3': 91,
    '温度27.4': 92,
    '温度35.1': 93,
    '温度35.2': 94,
    '流量36': 95,
    '流量51': 96,
    '液位5': 97,
  },
  '1': { // fuelTitle
    '流量39': 69,
    '流量40': 70,
    '流量41': 71,
    '温度26': 72,
    '温度27': 73,
    '压力22': 74,
    '压力25': 75,
    '液位18': 76,
    '液位21': 77,
    '温度54': 78,
    '温度56': 79,
    '温度58': 80,
    '压力51': 81,
    '压力52': 82,
    '压力53': 83,
    '压力55': 84,
    '压力57': 85,
    '压力59': 86
  },
  '5': { // airTitle
    '管路流量': 15,
    '压力': 16,
    '温度': 17,
    '露点': 18,
    '空气流量': 19,
    '大气压力': 20,
    '大气温度': 21,
    '大气湿度': 22,
  }
};

const selectedDeviceIndexes = computed(() => {
  const map = deviceIdMap[idol.value] || {};
  return selectedDevices.value
    .map(index => deviceOptions.value[index])  // 通过 index 拿设备名
    .map(name => map[name])                    // 拿到设备 ID
    .filter(id => id !== undefined);           // 过滤无效 ID
});



// 声明时间单位和间隔值
const selectedTimeUnit = ref('second'); // 默认单位为秒
const selectedTimeValue = ref(1); // 默认间隔值为1

// 声明 rawData
const rawData = ref([]); // 用于存储原始数据

var myChart;
let titleListData = ref([]);
let getExcelData = ref([]);
const type = ref([]);
const startDate = ref(null);
const endDate = ref(null);
onMounted(() => {
  type.value = 0;
})
const change1 = () => {
  type.value = 0;
};
const change2 = () => {
  type.value = 1;
};

function getDeviceTitleById(systemId, deviceId) {
  const systemMap = deviceIdMap[String(systemId)];
  if (!systemMap) return '';
  return Object.keys(systemMap).find(name => systemMap[name] === deviceId) || '';
}

function requestExcelData() {
  // 清空数据
  getExcelData.value = [];
  rawData.value = [];
  var systemId = document.getElementById("deviceType").value;
  systemid.value = document.getElementById("deviceType").value;
  var createTime = startDate.value;
  var endTime = endDate.value;
  console.log(createTime + "+++++" + endTime);

  // 根据 systemId 设置表头
  switch (systemId) {
    case "4":
      titleListData.value = aboutTitle.value;
      break;
    case "3":
      titleListData.value = fluidTitle.value;
      break;
    case "2":
      titleListData.value = waterTitle.value;
      break;
    case "1":
      titleListData.value = fuelTitle.value;
      break;
    case "5":
      titleListData.value = airTitle.value;
      break;
  }

  // 获取筛选参数
  const intervalType = selectedTimeUnit.value;
  const intervalValue = parseInt(selectedTimeValue.value, 10);
  // 请求数据
  request.getExcelData({ systemId: systemId, createTime: createTime, endTime: endTime })
  .then(res => {
    // 1. 时间间隔筛选
    const filteredByTime = res.data.filter((item, index) => {
      if (intervalType === 'second') {
        return index % (intervalValue) === 0;
      } else if (intervalType === 'minute') {
        return index % (60 * intervalValue) === 0;
      } else if (intervalType === 'hour') {
        return index % (3600 * intervalValue) === 0;
      }
      return true;
    });
    // 2. 列筛选与单位转换
    rawData.value = filteredByTime.map((item, itemIndex) => {
      const contextObj = JSON.parse(item.context); // 解析 JSON 字符串
      const dataList = contextObj.data.map(d => d.data); // 只取出 data 字段值
      const processedData = [];
      /* console.log("dataList" + dataList);
      console.log("selectedDeviceIndexes" + selectedDeviceIndexes.value); */
      for (let j of selectedDeviceIndexes.value) {
        let value = dataList[j];
        //console.log("value" + value);
        // 如果当前值无效（如空字符串、NaN），尝试使用前一个有效数据
        if (value === '' || isNaN(parseFloat(value))) {
          let prevValidValue = null;
          for (let k = itemIndex - 1; k >= 0; k--) {
            const prevContextObj = JSON.parse(filteredByTime[k].context);
            const prevList = prevContextObj.data.map(d => d.data);
            const prevValue = prevList[j];
            if (prevValue !== '' && !isNaN(parseFloat(prevValue))) {
              prevValidValue = prevValue;
              break;
            }
          }
          value = prevValidValue !== null ? prevValidValue : value;
        }
        // 用系统ID和设备ID反查设备名称
        const deviceTitle = getDeviceTitleById(systemId, j);
        //console.log(deviceTitle);
        if (deviceTitle.includes('压力') && deviceTitle.includes('大气')) {
          processedData.push(parseFloat(value).toFixed(2) + 'kPa');
        } else if (deviceTitle.includes('压力')) {
          processedData.push(parseFloat(value).toFixed(3) + 'MPa');
        } else if (deviceTitle.includes('温度')) {
          processedData.push(parseFloat(value).toFixed(2) + '℃');
        } else if (deviceTitle.includes('流量')) {
          processedData.push(parseFloat(value).toFixed(2) + 'm³/h');
        } else if (deviceTitle.includes('液位')) {
          processedData.push(parseFloat(value).toFixed(1) + 'mm');
        } else if (deviceTitle.includes('露点')) {
          processedData.push(parseFloat(value).toFixed(2) + '℃');
        } else if (deviceTitle.includes('湿度')) {
          processedData.push(parseFloat(value).toFixed(1) + '%RH');
        } else {
          processedData.push(value); // fallback
        }

      }

      return { ...item, context: processedData };
    });

    function getUnitByDeviceTitle(title) {
      if (title.includes('压力') && title.includes('大气')) return 'kPa';  // 处理大气压力
      if (title.includes('压力')) return 'MPa';
      if (title.includes('温度')) return '℃';
      if (title.includes('流量')) return 'm³/h';
      if (title.includes('液位')) return 'mm';
      if (title.includes('露点')) return '℃';  // 露点的单位是 ℃
      if (title.includes('湿度')) return '%RH'; // 湿度的单位是 %RH
      return ''; // 默认返回空字符串，如果没有匹配的设备标题
    }



    function buildSeries(dataRows) {
      const strip = str => parseFloat(String(str).replace(/[^\d.\-]/g, '')) || 0;

      return selectedDeviceIndexes.value.map((deviceIndex, idx) => {
        const deviceTitle = getDeviceTitleById(systemId, deviceIndex); // 获取标题（如 "泵1流量"）
        return {
          name: deviceTitle, // 用完整标题作为曲线名
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: dataRows.map(r => ({
            value: strip(r.context[idx]),
            raw: r.context[idx],  // 保留原始数据（包含单位）
            title: deviceTitle
          }))
        };
      });
    }
    function generateChart(dataRows) {
      if (myChart) myChart.dispose();

      const timeList = dataRows.map(r => r.time);
      const series = buildSeries(dataRows);

      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let content = `${params[0].axisValue}<br/>`;

            params.forEach(p => {
              const unit = getUnitByDeviceTitle(p.seriesName);
              const value = p.data.value;
              content += `
                <span style="display:inline-block;margin-right:5px;
                border-radius:10px;width:9px;height:9px;background-color:${p.color};"></span>
                ${p.seriesName}：${value} ${unit}<br/>
              `;
            });

            return content;
          }
        },
        legend: {
                  data: series.map(s => s.name) // 
                },
        xAxis: {
          type: 'category',
          data: timeList,
          axisLabel: { rotate: 45, fontSize: 10 }
        },
        yAxis: { type: 'value' },
        series: series,  // 绑定曲线数据
        dataZoom: [{
          type: 'inside', // 内置型数据区域缩放
          xAxisIndex: 0,  // 控制 x 轴
          start: 0,       // 初始缩放范围
          end: 100
        }]
        
      };

      myChart = echarts.init(document.getElementById('chartRef1'));
      myChart.setOption(option);
      addZoomInteraction(myChart);
    }

    function handleZoom(e, chart) {
      e.stop();
      const delta = e.deltaY;
      const point = [e.offsetX, e.offsetY];

      // 获取鼠标位置对应的数据索引（处理无效值）
      const dataIndex = Math.round(chart.convertFromPixel({ xAxisIndex: 0 }, point)[0]);
      if (isNaN(dataIndex) || dataIndex < 0) return; // 忽略无效位置

      const option = chart.getOption();
      const xData = option.xAxis[0].data;
      const total = xData.length;
      if (total === 0) return;

      // 调整滚轮方向逻辑（根据浏览器差异可能需要反转）
      const zoomFactor = delta > 0 ? 1.2 : 0.8; // 测试时可能需要调整此处

      // 获取当前缩放范围
      const dataZoom = option.dataZoom?.[0] || { start: 0, end: 100 };
      const currentStart = (dataZoom.start / 100) * (total - 1);
      const currentEnd = (dataZoom.end / 100) * (total - 1);
      const currentWindowSize = currentEnd - currentStart;

      // 计算新范围并限制边界
      const newWindowSize = Math.max(1, currentWindowSize * zoomFactor); // 最小窗口为1
      const center = currentStart + (dataIndex - currentStart) * (currentWindowSize / total);
      const newStart = Math.max(0, center - newWindowSize / 2);
      const newEnd = Math.min(total - 1, center + newWindowSize / 2);

      // 触发缩放
      chart.dispatchAction({
        type: 'dataZoom',
        startValue: xData[Math.floor(newStart)],
        endValue: xData[Math.ceil(newEnd)]
      });
    }

    function handleResetZoom(chart) {
      chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
    }

    function addZoomInteraction(chart) {
      const zr = chart.getZr();
      if (!zr) return;

      const debouncedWheel = (e) => {
        // 使用 e.event 获取原始事件对象（ZRender 封装后的事件）
        const originalEvent = e.event;
        handleZoom(originalEvent, chart);
      };

      zr.on('wheel', debouncedWheel);
      zr.on('dblclick', () => handleResetZoom(chart));
    }


    getExcelData.value = rawData.value;   // 你已有的变量
    generateChart(getExcelData.value);    // 一句话搞定 
    makeTableMatrix()
  });
  /** 把 getExcelData.value 转成二维数组，第一行是表头 */
  function makeTableMatrix() {
    // 获取设备名称并更新 selectedname
    console.log("makeTableMatrix called");
    const deviceNames = selectedDeviceIndexes.value.map(deviceIndex => {
      const deviceTitle = getDeviceTitleById(systemId, deviceIndex);
      return deviceTitle || `设备${deviceIndex}`; // 如果没有找到设备标题，返回默认值
    });

    // 更新 selectedname
    selectedname.value = ['序号', '时间', ...deviceNames];

    // 等待 DOM 更新后执行操作
    nextTick(() => {
      console.log("selectedname updated:", selectedname.value);
    });

    const headers = ['序号', '时间', ...deviceNames];

    const rows = getExcelData.value.map((item, index) => [
      index + 1,
      item.time,
      ...item.context.map((value, i) => {
        const deviceIndex = selectedDeviceIndexes.value[i];
        const deviceTitle = getDeviceTitleById(idol.value, deviceIndex);
        return formatValueWithUnit(value, deviceTitle);
      })
    ]);
    exportData.value = [headers, ...rows];  
    console.log('exportData.value:', exportData.value);
    return [headers, ...getExcelData.value];
  }
}


    /**
     * 根据设备类型格式化值（带单位）
     */
     function formatValueWithUnit(value, deviceTitle) {
      if (!deviceTitle) return value;

      const numValue = parseFloat(value) || 0;

      // 处理大气压力
      if (deviceTitle.includes('压力') && deviceTitle.includes('大气')) {
        return numValue.toFixed(3) + 'kPa';
      }
      // 处理一般的压力
      if (deviceTitle.includes('压力')) {
        return numValue.toFixed(3) + 'MPa';
      }
      // 处理温度
      else if (deviceTitle.includes('温度')) {
        return numValue.toFixed(2) + '℃';
      }
      // 处理流量
      else if (deviceTitle.includes('流量')) {
        return numValue.toFixed(2) + 'm³/h';
      }
      // 处理液位
      else if (deviceTitle.includes('液位')) {
        return numValue.toFixed(1) + 'mm';
      }
      // 处理露点
      else if (deviceTitle.includes('露点')) {
        return numValue.toFixed(2) + '℃';
      }
      // 处理湿度
      else if (deviceTitle.includes('湿度')) {
        return numValue.toFixed(1) + '%RH';
      }

      return value;  // 默认返回原始值
    }


    /**
     * 导出Excel（优化版）
     */
    function exportToExcel() {
      try {
        const matrix = exportData.value;
        
        // 创建工作簿
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.aoa_to_sheet(matrix);
        
        // 设置列宽（第一列序号窄些，时间列宽些）
        const colWidths = [
          { wch: 8 },  // 序号
          { wch: 20 }, // 时间
          ...matrix[0].slice(2).map(() => ({ wch: 15 })) // 设备列
        ];
        ws['!cols'] = colWidths;
        
        // 添加工作表
        XLSX.utils.book_append_sheet(wb, ws, '设备数据');
        
        // 生成文件名
        const systemName = {
          '1': '高压水系统',
          '2': '低压水系统',
          '3': '液压系统',
          '4': '滑油系统',
          '5': '高压空气系统'
        }[idol.value] || '系统';
        
        const dateStr = new Date().toISOString().slice(0, 10);
        XLSX.writeFile(wb, `${systemName}_${dateStr}.xlsx`);
        
      } catch (error) {
        console.error('导出Excel失败:', error);
        alert('导出失败，请检查数据');
      }
    }

    /**
     * 打印表格（优化版）
     */
    function printTable() {
      const matrix = exportData.value;
      
      // 构建打印HTML
      const html = `
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>设备数据打印</title>
            <style>
              body { font-family: "Microsoft YaHei", sans-serif; margin: 15mm; }
              h1 { 
                text-align: center; 
                margin-bottom: 20px;
                font-size: 18px;
              }
              table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
                page-break-inside: auto;
              }
              th, td {
                border: 1px solid #333;
                padding: 5px 8px;
                text-align: center;
                word-break: break-all;
              }
              th {
                background-color: #f2f2f2;
                font-weight: bold;
              }
              tr { page-break-inside: avoid; }
              @media print {
                @page { size: A4 landscape; margin: 10mm; }
                body { margin: 0; }
              }
            </style>
          </head>
          <body>
            <h1>${getSystemName(idol.value)} - 设备数据报表</h1>
            <table>
              <thead>
                <tr>${matrix[0].map(col => `<th>${col}</th>`).join('')}</tr>
              </thead>
              <tbody>
                ${matrix.slice(1).map(row => 
                  `<tr>${row.map(col => `<td>${col}</td>`).join('')}</tr>`
                ).join('')}
              </tbody>
            </table>
            <div style="text-align: right; margin-top: 20px; font-size: 12px;">
              打印时间: ${new Date().toLocaleString()}
            </div>
          </body>
        </html>
      `;

      // 打开打印窗口
      const printWindow = window.open('', '_blank');
      printWindow.document.write(html);
      printWindow.document.close();
      
      // 确保内容加载完成后打印
      printWindow.onload = () => {
        setTimeout(() => {
          printWindow.print();
          printWindow.close();
        }, 500);
      };
    }

    /**
     * 获取系统名称
     */
    function getSystemName(systemid) {
      return {
        '1': '高压水系统',
        '2': '低压水系统',
        '3': '液压系统',
        '4': '滑油系统',
        '5': '高压空气系统'
      }[systemid] || '未知系统';
    }
    // 获取所有按钮元素
      const buttons = document.querySelectorAll('.but-view');

      // 为每个按钮添加点击事件
      buttons.forEach(button => {
        button.addEventListener('click', function() {
          // 添加动画类
          this.classList.add('click-effect');
          
          // 动画结束后移除类，以便下次点击可以再次触发
          setTimeout(() => {
            this.classList.remove('click-effect');
          }, 800); // 与动画持续时间一致
        });
      });

</script>
<style scoped>
.printable {
  /* 引入图片 */
  background-size: 85% 90%;
  /* 设置图片的大小 */
  background-repeat: no-repeat;
  position: fixed;
  left: 6%;
  top: 4%;
  /* 固定定位 */
  width: 100%;
  /* 视口宽度 */
  height: 100%;
  background-repeat: no-repeat;

  .btn_anniu {
    position: relative;
    right: 36.7vw;
    width: 10%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: 0 solid #fff;
    color: #000;
    outline: none;
    background: #fff;
    /* 添加额外样式以覆盖可能的浏览器默认样式 */
    box-sizing: border-box;
    /* 确保宽度和高度包括边框和内边距 */
    outline: none;
    /* 移除默认的轮廓样式 */
  }

  .newStyle {
    border-bottom: 2px solid #f0892e;
    color: #f0892e;
    font-size: 16px;
    font-weight: bold;
  }

  .chartView {
    width: 80%;
    /* 视口宽度 */
    height: 70%;

    .deviceAlarm {
      width: 1800px;
      height: 900px;
      margin-left: 2%;
      border-radius: 8px;
    }
  }

  .horizontal {
    display: flex;
    width: 100%;
  }

  .select-view {
    margin-left: 4vw;
    color: #000000;
    margin-top: -1vw;

    .p-view {
      height: 4vh;
      margin-right: 20px;
    }

    .custom-date-time-picker {
      width: 300px;
      height: 40px;
      margin-left: 20px;
    }

    .but-view {
      width: 4vw;
      color: #fff;
      margin-left: 20px;
      border-radius: 5px;
      text-align: center;
      justify-content: center;
      align-items: center;
      background-color: #4cb7df;
      display: flex;
      cursor: pointer;
      /* 鼠标悬停时显示为手型，提示可以点击 */
      transition: background-color 0.3s ease; /* 添加过渡效果使变化更平滑 */
    }

    .but-view:active {
      background-color: #3a8fb3; /* 点击时的暗色 */
      transition: background-color 0s; /* 点击时立即变色 */
    }

    /* 或者使用动画效果 */
    .but-view.click-effect {
      animation: buttonClick 0.8s ease;
    }

    @keyframes buttonClick {
      0% {
        background-color: #3a8fb3;
      }
      100% {
        background-color: #4cb7df;
      }
    }
  }

  .scroll-container {
    position: relative;
    margin-left: 4%;
    overflow-x: auto;
    /* 允许水平滚动 */
    scrollbar-width: 3px;
    /* Firefox 需要的滚动条宽度 */
    scrollbar-color: #ccc transparent;
    /* 滚动条颜色和轨道颜色 */
    white-space: nowrap;
    /* 防止内容换行 */
    height: 82.1vh;
    /* 根据实际需要调整高度 */
    width: 90vw;
    /* 根据实际情况调整 */
    border: 0px solid #ccc;
    font-size: 4vh;
    vertical-align: top;
    /* 垂直对齐方式，可根据实际需要调整 */
    line-height: 3.8vh;
    /* 与容器高度相同 */
    margin-top: 4px;

    th {
      height: 3.8vh;
      width: 100px;
      padding: 0 10px;
      text-align: center;
      color: #000;
      /* 水平居中 */
      border: 1px solid #000;


      /* 加深边框 */
    }

    td {
      height: 1.8vh;
      width: 100px;
      padding: 0 10px;
      font-size: 20px;
      text-align: center;
      color: #000;
      padding: 10px;
      text-align: center;
      /* 水平居中 */
    }
  }

  .header-row {
    /* 横排序*/
    display: flex;
    background-color: rgb(255, 255, 255);
    height: 3.8vh;
    font-size: 1.5vh;
    text-align: center;
    /* 加深边框 */
  }

  .header-row-history {
    /* 横排序*/
    display: flex;
    background-color: rgb(255, 255, 255);
    height: 3.805vh;
    font-size: 1.5vh;
    text-align: center;
    /* 水平居中 */
  }

  .text-color {
    color: rgb(64, 72, 75);
    text-align: center;
    line-height: 3.8vh;
    /* 设置与容器高度相同的行高 */
  }

  .line-spacing {
    height: 3.8vh;
    width: 15.835vw;
    border: 1px solid #000;
  }
  /* 多选样式优化 */
select[multiple] {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px;
  option {
    padding: 5px;
    &:checked {
      background: #409eff;
      color: white;
    }
  }
}

/* 响应式布局 */
.select-view.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  
  > * {
    flex: 0 0 auto;
    margin: 5px 0;
  }
}
}
</style>